<template>
	<div>
		<!-- 混钢模型 -->
		<pol-title title="混钢模型实时界面"></pol-title>
		<div class="border-solid bg-tm radius-sm padding-lg">
			<div class="flex-between">
				<div class="flex align-center">
					<span class="margin-right-xl text-white">流号</span>
					<div class="rest-el-checkbox">
						<el-checkbox v-model="checked1" size="large" class="margin-right-xxl">
							<template #default>
								<span class="text-white">第一流</span>
							</template>
						</el-checkbox>
						<el-checkbox v-model="checked2" size="large" class="margin-right-xxl">
							<template #default>
								<span class="text-white">第二流</span>
							</template>
						</el-checkbox>
						<el-checkbox v-model="checked3" size="large" class="margin-right-xxl">
							<template #default>
								<span class="text-white">第三流</span>
							</template>
						</el-checkbox>
						<el-checkbox v-model="checked4" size="large" class="margin-right-xxl">
							<template #default>
								<span class="text-white">第四流</span>
							</template>
						</el-checkbox>
						<el-checkbox v-model="checked5" size="large" class="margin-right-xxl">
							<template #default>
								<span class="text-white">第五流</span>
							</template>
						</el-checkbox>
						<el-checkbox v-model="checked6" size="large" class="margin-right-xxl">
							<template #default>
								<span class="text-white">全部</span>
							</template>
						</el-checkbox>
					</div>
				</div>

				<div class="flex align-center text-white testList-war">
					<span class="margin-right">关键字</span>
					<el-input v-model="input" style="width: 400px" placeholder="选择输入关键字搜索" size="large" />
					<el-button icon="Search" type="primary" class="btn-bg-blue margin-left" size="large" @click="search">查询</el-button>
				</div>
			</div>

			<!-- 表格 -->
			<pol-table ref="polTableRef" v-bind="tableOpt" height="230px" class="margin-top-lg"></pol-table>
		</div>

		<div class="flex margin-top">
			<div class="flex-sub border-solid bg-tm radius-sm padding-lg">
				<div class="flex justify-center">
					<div class="text-white text-lg" style="width: 800px;">
						<div class="flex align-center">
							<div class="" style="flex: 0 0 250px">
								<span class="text-w-title text-right">开始位置</span>
								<span class="text-bold text-xl margin-left-lg">0</span>
							</div>

							<div class="flex-sub">
								<span class="text-w-title text-right">C</span>
								<span class="text-bold text-xl margin-left-lg">0.13</span>
							</div>

							<div class="flex-sub">
								<span class="text-w-title text-right">Mn</span>
								<span class="text-bold text-xl margin-left-lg">0.09</span>
							</div>

							<div class="flex-sub">
								<span class="text-w-title text-right">S</span>
								<span class="text-bold text-xl margin-left-lg">0.11</span>
							</div>
						</div>

						<div class="flex align-center margin-top-lg">
							<div class="" style="flex: 0 0 250px">
								<span class="text-w-title text-right">结束位置</span>
								<span class="text-bold text-xl margin-left-lg">11.235</span>
							</div>

							<div class="flex-sub">
								<span class="text-w-title text-right">Si</span>
								<span class="text-bold text-xl margin-left-lg">0.05</span>
							</div>

							<div class="flex-sub">
								<span class="text-w-title text-right">P</span>
								<span class="text-bold text-xl margin-left-lg">0.2</span>
							</div>

							<div class="flex-sub">
								<span class="text-w-title text-right">B</span>
								<span class="text-bold text-xl margin-left-lg">0.06</span>
							</div>
						</div>
					</div>
				</div>

				<div class="mixed-mid-box text-white text-lg">
					<div class="mixed-c-l">坯头</div>
					<span>开始</span>
					<div class="mixed-content margin-top"></div>
					<div class="mixed-c-r">坯尾</div>
				</div>

				<div class="flex justify-center margin-top-xl">
					<div class="text-white text-lg" style="width: 800px;">
						<div class="flex align-center">
							<div class="" style="flex: 0 0 250px">
								<span class="text-w-title text-right">原炉号</span>
								<span class="text-bold text-xl margin-left-lg">20211201</span>
							</div>

							<div class="flex-sub">
								<span class="text-w-title text-right">新炉号</span>
								<span class="text-bold text-xl margin-left-lg">20241205</span>
							</div>
						</div>

						<div class="flex align-center margin-top-lg">
							<div class="" style="flex: 0 0 250px">
								<span class="text-w-title text-right">原钢种</span>
								<span class="text-bold text-xl margin-left-lg">45</span>
							</div>

							<div class="flex-sub">
								<span class="text-w-title text-right">新钢种</span>
								<span class="text-bold text-xl margin-left-lg">46</span>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="mixed-chart margin-left border-solid bg-tm radius-sm padding-lg">
				<div class="lineChart-box" ref="lineChartRef"></div>
			</div>
		</div>

		<div class="border-solid bg-tm radius-sm padding-lg margin-top mixed-table">
			<!-- 表格 -->
			<pol-table ref="polTableRef" v-bind="tableOpt2" height="400px" class="margin-top-lg"></pol-table>
		</div>

	</div>
</template>

<script setup>
	import { ref, getCurrentInstance, onMounted } from 'vue';
	const { proxy } = getCurrentInstance();

	const checked1 = ref(false)
	const checked2 = ref(false)
	const checked3 = ref(false)
	const checked4 = ref(false)
	const checked5 = ref(false)
	const checked6 = ref(false)

	const input = ref('')
	const search = () => {

	}

	const polTableRef = ref(null); //表格ref
	//表格配置
	const columns = ref([
		{ label: '序号', key: 'ItemCode', align: 'center', width: '100px' },
		{ label: '浇次号', key: 'ItemName', align: 'center' },
		{ label: '浇次号', key: 'ItemValue', align: 'center' },
		{ label: '流号', key: 'IsDefault', align: 'center' },
		{ label: '开始片号', key: 'P_IsSys', align: 'center' },
		{ label: '结束片号', key: 'P_IsReadOnly', align: 'center' },
		{ label: '切割时间', key: 'gangbao', align: 'center' },
	]);

	//表格配置
	const tableOpt = ref({
		columns: columns.value,
		localData: [{
				ItemCode: '1',
				ItemName: '20241201',
				ItemValue: '32',
				IsDefault: '1',
				P_IsSys: '125.355',
				P_IsReadOnly: '155.355',
				gangbao: '2024-12-12 08:32:15'
			},
			{
				ItemCode: '2',
				ItemName: '20241201',
				ItemValue: '32',
				IsDefault: '1',
				P_IsSys: '125.355',
				P_IsReadOnly: '155.355',
				gangbao: '2024-12-12 08:32:15'
			},
			{
				ItemCode: '3',
				ItemName: '20241201',
				ItemValue: '32',
				IsDefault: '1',
				P_IsSys: '125.355',
				P_IsReadOnly: '155.355',
				gangbao: '2024-12-12 08:32:15'
			},
			{
				ItemCode: '4',
				ItemName: '20241201',
				ItemValue: '32',
				IsDefault: '1',
				P_IsSys: '125.355',
				P_IsReadOnly: '155.355',
				gangbao: '2024-12-12 08:32:15'
			},
			{
				ItemCode: '5',
				ItemName: '20241201',
				ItemValue: '32',
				IsDefault: '1',
				P_IsSys: '125.355',
				P_IsReadOnly: '155.355',
				gangbao: '2024-12-12 08:32:15'
			},
		]
	});


	// 折线图配置
	const lineChartRef = ref(null)

	let option = {
		backgroundColor: 'transparent', // 设置背景为透明
		tooltip: {
			trigger: 'axis',
			show: true // 确保 tooltip 是显示的
		},
		legend: {
			data: ['C']
		},
		xAxis: {
			type: 'category',
			boundaryGap: false,
			data: ['08:30', '08:40', '08:50', '09:00', '09:10', '09:20', '09:30']
		},
		yAxis: {
			type: 'value',
			splitLine: {
				show: false // 隐藏辅助横线
			}
		},
		series: [{
			name: 'C',
			data: [150, 230, 224, 218, 135, 147, 260],
			type: 'line',
			symbol: 'none' // 隐藏折线上的点
		}]
	};
	onMounted(() => {
		const myChart = proxy.$echarts.init(lineChartRef.value, 'dark');
		myChart.setOption(option);
	})


	//表格配置
	const columns2 = ref([
		{ label: '成份', key: 'ItemCode', align: 'center' },
		{ label: '0', key: 'ItemName', align: 'center' },
		{ label: '0.24', key: 'ItemValue', align: 'center' },
		{ label: '0.28', key: 'IsDefault', align: 'center' },
		{ label: '0.72', key: 'P_IsSys', align: 'center' },
		{ label: '0.96', key: 'P_IsReadOnly', align: 'center' },
		{ label: '1.2', key: 'gangbao', align: 'center' },
		{ label: '1.44', key: 'gangbao2', align: 'center' },
		{ label: '1.68', key: 'gangbao3', align: 'center' },
		{ label: '1.92', key: 'gangbao4', align: 'center' },
		{ label: '2.16', key: 'gangbao5', align: 'center' },
		{ label: '2.4', key: 'gangbao6', align: 'center' },
		{ label: '2.64', key: 'gangbao7', align: 'center' },
		{ label: '2.88', key: 'gangbao8', align: 'center' },
		{ label: '3.12', key: 'gangbao9', align: 'center' },
		{ label: '3.36', key: 'gangbao10', align: 'center' },
		{ label: '3.6', key: 'gangbao11', align: 'center' },
		{ label: '3.84', key: 'gangbao12', align: 'center' },
		{ label: '4.08', key: 'gangbao13', align: 'center' },
		{ label: '4.34', key: 'gangbao14', align: 'center' },
		{ label: '4.56', key: 'gangbao15', align: 'center' },
		{ label: '4.8', key: 'gangbao16', align: 'center' },
		{ label: '5.04', key: 'gangbao17', align: 'center' },
		{ label: '5.28', key: 'gangbao18', align: 'center' },
		{ label: '5.52', key: 'gangbao19', align: 'center' },
		{ label: '5.76', key: 'gangbao20', align: 'center' },
		{ label: '6', key: 'gangbao21', align: 'center' },
		{ label: '6.24', key: 'gangbao22', align: 'center' },
		{ label: '6.48', key: 'gangbao23', align: 'center' },
		{ label: '6.72', key: 'gangbao24', align: 'center' },
		{ label: '6.96', key: 'gangbao25', align: 'center' },
		{ label: '7.2', key: 'gangbao26', align: 'center' },
		{ label: '7.44', key: 'gangbao27', align: 'center' },
		{ label: '7.68', key: 'gangbao28', align: 'center' },
		{ label: '7.92', key: 'gangbao29', align: 'center' },
		{ label: '8.16', key: 'gangbao30', align: 'center' },
		{ label: '8.4', key: 'gangbao31', align: 'center' },
		{ label: '8.64', key: 'gangbao32', align: 'center' },
		{ label: '8.88', key: 'gangbao33', align: 'center' },
		{ label: '9.12', key: 'gangbao34', align: 'center' },
	]);

	//表格配置
	const tableOpt2 = ref({
		columns: columns2.value,
		localData: [{
				ItemCode: 'C',
				ItemName: '0.13',
				ItemValue: '0.24',
				IsDefault: '0.28',
				P_IsSys: '0.72',
				P_IsReadOnly: '0.96',
				gangbao: '1.2',
				gangbao2: '1.44',
				gangbao3: '1.68',
				gangbao4: '2.16',
				gangbao5: '1.44',
				gangbao6: '1.44',
				gangbao7: '0.96',
				gangbao8: '0.96',
				gangbao9: '0.96',
				gangbao10: '0.96',
				gangbao11: '1.2',
				gangbao12: '1.2',
				gangbao13: '1.2',
				gangbao14: '1.2',
				gangbao15: '0.24',
				gangbao16: '0.24',
				gangbao17: '0.24',
				gangbao18: '0.24',
				gangbao19: '0.13',
				gangbao20: '0.13',
				gangbao21: '0.13',
				gangbao22: '0.13',
				gangbao23: '7.92',
				gangbao24: '7.92',
				gangbao25: '7.92',
				gangbao26: '7.92',
				gangbao27: '8.64',
				gangbao28: '8.64',
				gangbao29: '8.64',
				gangbao30: '8.64',
				gangbao31: '6.72',
				gangbao32: '6.72',
				gangbao33: '6.72',
				gangbao34: '6.72',
			},
			{
				ItemCode: 'Si',
				ItemName: '0.13',
				ItemValue: '0.24',
				IsDefault: '0.28',
				P_IsSys: '0.72',
				P_IsReadOnly: '0.96',
				gangbao: '1.2',
				gangbao2: '1.44',
				gangbao3: '1.68',
				gangbao4: '2.16',
				gangbao5: '1.44',
				gangbao6: '1.44',
				gangbao7: '0.96',
				gangbao8: '0.96',
				gangbao9: '0.96',
				gangbao10: '0.96',
				gangbao11: '1.2',
				gangbao12: '1.2',
				gangbao13: '1.2',
				gangbao14: '1.2',
				gangbao15: '0.24',
				gangbao16: '0.24',
				gangbao17: '0.24',
				gangbao18: '0.24',
				gangbao19: '0.13',
				gangbao20: '0.13',
				gangbao21: '0.13',
				gangbao22: '0.13',
				gangbao23: '7.92',
				gangbao24: '7.92',
				gangbao25: '7.92',
				gangbao26: '7.92',
				gangbao27: '8.64',
				gangbao28: '8.64',
				gangbao29: '8.64',
				gangbao30: '8.64',
				gangbao31: '6.72',
				gangbao32: '6.72',
				gangbao33: '6.72',
				gangbao34: '6.72',
			},
			{
				ItemCode: 'Mn',
				ItemName: '0.13',
				ItemValue: '0.24',
				IsDefault: '0.28',
				P_IsSys: '0.72',
				P_IsReadOnly: '0.96',
				gangbao: '1.2',
				gangbao2: '1.44',
				gangbao3: '1.68',
				gangbao4: '2.16',
				gangbao5: '1.44',
				gangbao6: '1.44',
				gangbao7: '0.96',
				gangbao8: '0.96',
				gangbao9: '0.96',
				gangbao10: '0.96',
				gangbao11: '1.2',
				gangbao12: '1.2',
				gangbao13: '1.2',
				gangbao14: '1.2',
				gangbao15: '0.24',
				gangbao16: '0.24',
				gangbao17: '0.24',
				gangbao18: '0.24',
				gangbao19: '0.13',
				gangbao20: '0.13',
				gangbao21: '0.13',
				gangbao22: '0.13',
				gangbao23: '7.92',
				gangbao24: '7.92',
				gangbao25: '7.92',
				gangbao26: '7.92',
				gangbao27: '8.64',
				gangbao28: '8.64',
				gangbao29: '8.64',
				gangbao30: '8.64',
				gangbao31: '6.72',
				gangbao32: '6.72',
				gangbao33: '6.72',
				gangbao34: '6.72',
			},

		]
	});
</script>

<style lang="scss" scoped>
	.mixed-title {
		flex: 0 0 150px;
	}

	.mixed-chart {
		flex-basis: 40%;
	}

	.text-w-title {
		color: rgba(255, 255, 255, 0.6);
	}

	.mixed-mid-box {
		position: relative;
		padding: 0 20px 0 50px;
		margin-top: 30px;

		.mixed-content {
			height: 50px;
			background: linear-gradient(180deg, #173494 0%, #328FD4 100%);
		}

		.mixed-c-l {
			position: absolute;
			left: 30px;
			bottom: 0;
			height: 150px;

			&::after {
				position: absolute;
				left: 0;
				top: 30px;
				bottom: 0;
				content: '';
				border-left: 1px solid #fff;
			}
		}

		.mixed-c-r {
			position: absolute;
			right: 80px;
			bottom: 0;
			height: 150px;

			&::after {
				position: absolute;
				left: 0;
				top: 30px;
				bottom: 0;
				content: '';
				border-left: 1px solid #fff;
			}
		}
	}

	.lineChart-box {
		width: 100%;
		height: 320px;
	}
</style>